<template>
  <div>
    <Header/>
    <div class="article-info">
      <Article :article="article"/>
      <div class="comment">
        <div class="comment-form" v-if="article.isComment === 1">
          <el-divider>评论区</el-divider>
          <el-form :model="comment" :rules="rules" ref="commentForm" label-position="right" label-width="80px">
            <el-form-item label="名称" prop="name">
              <el-input v-model="comment.name" placeholder="您的姓名"/>
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input type="textarea" v-model="comment.content" :rows="5" show-word-limit maxlength="200"
                        placeholder="评论内容"/>
            </el-form-item>
            <el-form-item style="display: flex;justify-content: right">
              <el-button type="primary" @click="commitComment">提及评论</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-else style="text-align: center;margin: 20px;">
          <h3>该文章暂不支持评论！</h3>
        </div>
        <div class="comment-list" v-if="commentList.length>0">
          <el-divider>评论列表</el-divider>
          <div class="comment-list-item" style="width: 600px;margin: 20px auto;border-bottom: 1px solid yellowgreen" v-for="item in commentList" :key="item.commentId">
            <div style="display: flex;justify-content: space-between;margin-bottom: 15px">
              <h3>{{item.name}}</h3>
              <p>{{ item.commentTime }}</p>
            </div>
            <p style="margin-bottom: 15px">{{item.content}}</p>
          </div>
          <el-pagination hide-on-single-page :total="pageInfo.total" page-size="5" :current-page="pageInfo.page" @current-change="currentChange" background style="text-align: center" layout="prev,pager,next,total"/>
        </div>
        <div v-else style="text-align: center;margin: 20px">
          <h3>暂无评论</h3>
        </div>
      </div>

    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import Article from '@/components/Article'

export default {
  name: 'ArticleDetail',
  components: { Header, Footer, Article },
  data () {
    return {
      article: {},
      comment: {
        name: '',
        content: '',
        articleId: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入您的姓名',
          trigger: 'blur'
        }],
        content: [{
          required: true,
          message: '请输入评论内容',
          trigger: 'blur'
        }]
      },
      commentList: [],
      pageInfo: {
        page: 1,
        total: 0
      }
    }
  },
  methods: {
    init (articleId) {
      this.$http.get('/api/article/' + articleId).then(data => {
        this.article = data.data
        if (this.article.isComment === 1) {
          this.getCommentList()
        }
      })
    },
    updateRead (articleId) {
      this.$http.post(`/api/article/${articleId}/read`).then()
    },
    commitComment () {
      this.$http.post('/api/comment/save', this.comment).then(() => {
        this.$alert('提交评论成功，等待审核！', { type: 'success' }).then(() => {
          this.comment.name = ''
          this.comment.content = ''
        })
      })
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.getCommentList()
    },
    getCommentList () {
      this.$http.get(`api/article/${this.article.articleId}/comment/${this.pageInfo.page}`).then(data => {
        this.commentList = data.data.records
        this.pageInfo.page = data.data.current
        this.pageInfo.total = data.data.total
      })
    }
  },
  created () {
    this.$nextTick(() => {
      this.comment.articleId = this.$route.query.articleId
      this.init(this.comment.articleId)
      this.updateRead(this.comment.articleId)
    })
  }
}
</script>

<style scoped lang="scss">
.article-info {
  padding-top: 70px;
  margin: 0 auto;
  width: 780px;
  min-height: calc(100vh - 150px);
}
</style>
